<template>
  <div class="layout">
    <Layout style="height:100%">
      <Login ref="loginWindow"></Login>
      <Register ref='registerWindow'></Register>
      <Header>
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo"></div>
          <div class="layout-nav" v-if="!this.$store.state.username">
            <MenuItem name="1" >
              <span @click="openLoginWindow" class="top-nav-line" style="font-size: 16px">登录</span>
            </MenuItem>
            <MenuItem name="2">
              <span @click="openRegisterWindow" class="top-nav-line register-button" style="font-size: 16px">注册</span>
            </MenuItem>
          </div>
          <div class="layout-header" v-else>
            <Dropdown>
                <Badge :count="1">
                  <Avatar icon="ios-person" :src="userInfo.headerImage" shape="square" style="cursor: pointer;"/>
                </Badge>
                <DropdownMenu slot="list">
                    <DropdownItem>
                      <Icon type="ios-person" />
                      个人中心
                    </DropdownItem>
                    <DropdownItem>
                      <Icon type="ios-settings" />
                      账号设置
                    </DropdownItem>
                    <DropdownItem divided>
                      <Icon type="ios-chatboxes" />
                      用户反馈
                    </DropdownItem>
                    <DropdownItem>
                      <Icon type="ios-shirt" />
                      商品管理
                    </DropdownItem>
                    <DropdownItem>
                      <Icon type="ios-notifications" />
                      公告
                    </DropdownItem>
                    <DropdownItem divided>
                      <Icon type="ios-help-circle-outline" />
                      帮助
                    </DropdownItem>
                    <DropdownItem>
                      <Icon type="ios-power" />
                      退出
                    </DropdownItem>
                </DropdownMenu>
            </Dropdown>

          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{background: '#fff'}">
          <Menu active-name="2-1" theme="light" width="auto" :open-names="['2']">
            <Submenu name="1">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>数据
              </template>
              <router-link to="">
                <MenuItem name="1-1">数据查询</MenuItem>
              </router-link>

              <router-link to="">
                <MenuItem name="1-2">数据分析</MenuItem>
              </router-link>

              <router-link to="">
                <MenuItem name="1-3">日志</MenuItem>
              </router-link>
            </Submenu>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-analytics"></Icon>购物
              </template>
              <router-link to="/shops">
                <MenuItem name="2-1">商品</MenuItem>
              </router-link>

              <router-link to="/shopscar/:id">
                <MenuItem name="2-2">购物车</MenuItem>
              </router-link>
            </Submenu>
          </Menu>
        </Sider>
        <Layout :style="{padding: '24px'}">
          <Content class="content" :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            <transition>
              <router-view></router-view>
            </transition>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
import Login from "./components/UserComponents/login.vue";
import Register from "./components/UserComponents/register.vue";

export default {
  data: function() {
    return {
      routerList: [
        {
          name: "登录",
          router: "me",
          icon: "md-home"
        },
        {
          name: "数据",
          router: "data",
          icon: "md-home"
        },
        {
          name: "购物",
          router: "shops",
          icon: "md-home"
        }
      ],
      userInfo: {
        headerImage: 'https://i.loli.net/2017/08/21/599a521472424.jpg'
      },
      user: 'hello world'
    };
  },
  components: {
    Login,
    Register
  },
  methods: {
    openLoginWindow() {
      this.$refs.loginWindow.$el.style.display = 'block'
    },
    openRegisterWindow() {
      this.$refs.registerWindow.$el.style.display = 'block';
    }
  },
};
</script>
<style lang='less' scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  height: 100vh;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 300px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-header {
  width: 100px;
  margin: 0 auto;
  position: absolute;
  right: 0;
  .ivu-badge-count {
    top: 5px;
    line-height: 15px;
    width: 15px;
    border-radius: 50%;
    padding: 0;
  }
}
.content {
  height: 100px;
  width: 100%;
  overflow-x: hidden;
}
.register-button {
  width: 100px;
  line-height: 40px;
  background-color: transparent;
  border:1px solid #fff;
  border-radius: 50px;
  text-align: center;
}
.top-nav-line {
  color: #fff;
  cursor: pointer;
  display: inline-block;
}

</style>
